<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ info }}</p>
    <button @click="sub">是兄弟就来砍我</button>
  </div>
</template>

<script>
export default {
  // 使用 props 接收父组件传递的数据
  // 数组里面写字符串, 字符串就是父组件传递的属性名
  // 接收到数据后, 可以把它们当 data 中的数据来使用
  props: {
    title: {
      required: true,
      type: String,
    },
    price: {
      required:true,
      type:Number
    },
    info:{
      type:String,
      default:'非常好吃!'
    }
  },
};
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>